<template>
    <el-form :rules="rules" ref="deviceRequirementsForm" :model="value" style="text-align: left" label-position="left" label-width="100px" :disabled="disabled">
      <el-form-item label="操作系统" prop="osList">
        <el-checkbox-group v-model="value.osList">
          <el-checkbox
              v-for="osOption in Object.keys(deviceOSOptions)"
              :key="osOption"
              data-testid="requirement-os"
              :label="osOption">
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-col>
        <el-row>
          <el-form-item label="内存大小范围">
            <el-slider
                v-model="ramDuration"
                range
                :min="1"
                :max="1024"
                show-tooltip
            >
            </el-slider>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 100px">
          <div class="ram-duration-group">
            <el-form-item style="flex: 1" label="最小（GB）" prop="minRam" size="small">
              <el-input-number data-testid="requirement-min-ram" v-model="value.minRam" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item style="flex: 1" label="最大（GB）" prop="maxRam" size="small">
              <el-input-number data-testid="requirement-max-ram" v-model="value.maxRam" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
          </div>
        </el-row>
      </el-col>

      <el-form-item label="处理器架构" prop="processorArchitectureList">
        <el-checkbox-group v-model="value.processorArchitectureList">
          <el-checkbox
              v-for="osOption in Object.keys(processorArchitectureOptions)"
              :key="osOption"
              data-testid="requirement-processor"
              :label="osOption">
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
</template>

<script>
import {DEVICE_OS_LIST, PROCESSOR_ARCHITECTURE_LIST} from "@/components/new/const/deviceInfo";

export default {
  name: "DeviceRequirementsEdit",
  props: {
    value: {
      default(){
        return {
          osList: [],
          minRam: 100,
          maxRam: 1024,
          processorArchitectureList: []
        }
      }
    },
    disabled: {
      default() {
        return false;
      }
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    validate(callBack){
      console.log('validate');
      this.$refs['deviceRequirementsForm'].validate(callBack);
    }
  },
  data() {
    return {
      rules: {
        osList: [
          {
            validator: (rule, value, callBack) => {
              if(value && !(value.length === 0)){
                callBack();
              }else{
                callBack(new Error('请选择至少一个操作系统'))
              }
            },
            trigger: 'change'
          }
        ],
        processorArchitectureList: [
          {
            validator: (rule, value, callBack) => {
              if(value && !(value.length === 0)){
                callBack();
              }else{
                callBack(new Error('请选择至少一个处理器架构'))
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    deviceOSOptions() {
      return DEVICE_OS_LIST;
    },
    processorArchitectureOptions() {
      return PROCESSOR_ARCHITECTURE_LIST;
    },
    ramDuration: {
      get(){
        return [this.value.minRam, this.value.maxRam]
      },
      set(newVal){
        this.$emit('change', {...this.value, minRam: newVal[0], maxRam: newVal[1]})
      }
    }
  }
}
</script>

<style scoped>
  .ram-duration-group{
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(300px, 1fr)
    );
    grid-gap: 20px;
  }
</style>
